<template>
  <uni-row class="flex align-center" style="background: #f5f5f5; height: 100vh;width: 100vw;overflow: hidden;font-family: Source Han Sans CN, Source Han Sans CN;"
  >
    <uni-col :xs="6" :sm="5" :md="4" :lg="3" :xl="2"
             style="height: 95vh; border-radius: 16rpx; margin-left: 10px"
             class="bg_FFFFFF flex flex-column align-center justify-between"
    >
      <view id="headerIcon"
            class="flex align-center justify-center"
            style="border-bottom: 1px solid #f5f5f5; width: 100%"
            :style="{
              padding: `${18 * page.pageScale}px 0`,
            }"
      >
        <image
          :src="`${IMG_URL}/index/genealogy_select.png`"
          :style="{
            width: 34 * page.pageScale + 'px',
            height: 34 * page.pageScale + 'px',
          }"
        ></image>
        <view class="flex flex-column ml_10">
          <view
            class="color_FF4206 fw_500"
            :style="{
              fontSize: 19 * page.pageScale + 'px',
            }"
          >
            拾亲
          </view>
          <view
            class="color_FF4206 fw_500"
            :style="{
              fontSize: 6 * page.pageScale + 'px',
            }"
          >
            再小的家庭 也要有传承
          </view>
        </view>
      </view>
      <scroll-view scroll-y
                   style="width: 100%;"
                   :style="{
                    height: `calc(95vh - ${page.headerIcon}px - ${page.bottomIcon}px)`,
                  }"
                   class="flex-sub"
      >
        <view class="flex align-center flex-column">
          <view v-for="(item, index) in state.controlsList" :key="index">
            <view style="height: 10px"></view>
            <view class="flex align-center justify-center"
                  style="cursor: pointer;width: 150px;height: 45px;border-radius: 8px"
                  :style="{
                    background: index == state.current ? '#FF4206' : 'transparent',
                  }"
                  @click.stop="toggle(index)"
            >
              <image v-if="state.current == index"
                     :src="sheep.$url.cdn(item.activeIcon)"
                     :style="{
                        width: 20 * page.pageScale + 'px',
                        height: 20 * page.pageScale + 'px',
                     }"
              ></image>
              <image v-else
                     :src="sheep.$url.cdn(item.inactiveIcon)"
                     :style="{
                        width: 20 * page.pageScale + 'px',
                        height: 20 * page.pageScale + 'px',
                     }"
              ></image>
              <view
                class="fw_500"
                style="margin-left: 10px"
                :style="{
                  fontSize: 20 * page.pageScale + 'px',
                  color: index == state.current ? '#FFFFFF' : '#5C5C5C',
                }"
              >
                {{ item.text }}
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view id="bottomIcon"
            class="flex align-center flex-column"
      >
        <view class="flex flex-column align-center">
          <view v-for="(item, index) in state.setUp" :key="index"
                @click.stop="functionPage(index)"
          >
            <view style="height: 10px"></view>
            <view class="flex align-center" style="cursor: pointer">
              <view
                class="fw_500 color_4B4B4B"
                :style="{
                fontSize: 18 * page.pageScale + 'px',
              }"
              >
                {{ item.name }}
              </view>
            </view>
          </view>
        </view>
        <view style="width: 129px;border-top: 1px solid #E6E6E6;margin-top: 10px;cursor:pointer;margin-bottom: 10px;"
              class="flex flex-column align-center"
              @click.stop="goPath"
        >
          <image style="width: 45px;border-radius: 50%;margin-top: 10px;"
                 mode="widthFix"
                 :src="userInfo.avatar.indexOf('http') != -1 ? userInfo.avatar : `${nc_image}${userInfo.avatar}`"
          ></image>
          <view style="font-size: 11px;color: #5C5C5C;margin-top: 6px;">
            {{ userInfo.nickname }}
          </view>
          <view style="font-size: 11px;color: #5C5C5C;margin-top: 5px;" class="fw_500">
            拾亲号: {{ userInfo.uid }}
          </view>
        </view>
      </view>
    </uni-col>
    <uni-col :xs="18" :sm="19" :md="20" :lg="21" :xl="22" style="height: 95vh; margin-left: 10px;position: relative;">
      <view style="width: 99%;height: 100%" class=" flex flex-column align-center">
        <!-- 首页 -->
        <homePage v-if="state.current == 0" :pageWidth="page.pageWidth" :pageHeight="page.pageHeight"
                  @viewDetails="viewDetails"
                  @surnameDetails="surnameDetails"
                  @selectFestivals="selectFestivals"
        ></homePage>
        <!-- 家庭 -->
        <familyPage v-if="state.current == 1" :pageWidth="page.pageWidth" :pageHeight="page.pageHeight"></familyPage>
        <!-- 家谱 -->
        <genealogyPage v-if="state.current == 2" :pageWidth="page.pageWidth"
                       :pageHeight="page.pageHeight"></genealogyPage>
        <!-- 当前登录人员的个人中心 -->
        <peoplePage v-if="state.current == 8"></peoplePage>
      </view>
      <!-- 关于姓氏 -->
      <view class="flex flex-column align-center surnameTree"
            style="height: 100%;position: absolute;background: #FFFFFF;width: 99%;left: 100%;top: 0;border-radius: 8px;overflow: hidden"
            :class="pageConfig.isSurnameTree ? 'showSurnameTree' : 'hideSurnameTree'"
      >
        <uni-row style="width: 100%;border-bottom: 1px solid #E8E8E8"
                 class="flex flex-column align-center"
        >
          <uni-col :span="24" class="flex align-center" style="margin: 10px;">
            <image :src="`${IMG_URL}/index/pc_back.png`"
                   style="width: 30px;height: 30px;cursor:pointer;margin-left: 15px;"
                   @click.stop="closeSurnameTree"
            ></image>
            <view class="flex align-center" style="margin-left: 10px;">
              <view style="width: 4px;height: 18px;background: #FF440A;border-radius: 7px;"></view>
              <view style="font-size: 28px;color: #363636;font-weight: 500;margin-left: 5px;">
                关于姓氏
              </view>
            </view>
          </uni-col>
        </uni-row>
        <uni-row style="width: 100%;"
                 class="flex-sub flex flex-column"
        >
          <uni-col :span="24" style="height: 100%;"
                   class="flex flex-column align-center justify-center flex-sub"
          >
            <view class="flex-sub" scroll-y="true"
                  style="width: 98%;border-radius: 22px 22px 22px 22px;border: 1px solid #EDEDED;margin-top: 10rpx;margin-bottom: 10px;overflow-y: scroll;position: relative;background: rgb(251, 243, 225)"
            >
              <view style="position: absolute;left: 50%;transform: translateX(-50%);">
                <mp-html :content="state.surnameTree.content.content"></mp-html>
              </view>
            </view>
          </uni-col>
        </uni-row>
      </view>
      <!-- 姓氏详情 -->
      <view class="flex flex-column align-center surnameTree"
            style="height: 100%;position: absolute;background: #FFFFFF;width: 99%;left: 100%;top: 0;border-radius: 8px;overflow: hidden"
            :class="pageConfig.isSurnameDetail ? 'showSurnameTree' : 'hideSurnameTree'"
      >
        <uni-row style="width: 100%;border-bottom: 1px solid #E8E8E8"
                 class="flex flex-column align-center"
        >
          <uni-col :span="24" class="flex align-center" style="margin: 10px;">
            <image :src="`${IMG_URL}/index/pc_back.png`"
                   style="width: 30px;height: 30px;cursor:pointer;margin-left: 15px;"
                   @click.stop="closeSurnameDetail"
            ></image>
            <view class="flex align-center" style="margin-left: 10px;">
              <view style="width: 4px;height: 18px;background: #FF440A;border-radius: 7px;"></view>
              <view style="font-size: 28px;color: #363636;font-weight: 500;margin-left: 5px;">
                {{ state.surnameDetail.surname }}姓始祖
              </view>
            </view>
          </uni-col>
        </uni-row>
        <uni-row style="width: 100%;"
                 class="flex-sub flex"
        >
          <uni-col :span="6" style="height: 100%;"
                   class="flex flex-column align-center justify-center"
          >
            <view class="flex-sub flex flex-column align-center" scroll-y="true"
                  style="width: 96%;border-radius: 22px;border: 1px solid #EDEDED;margin-top: 10rpx;margin-bottom: 10px;"
            >
              <view style="margin-top: 25px;width: 80%">
                <image :src="state.surnameDetail.image_input" style="width: 100%;" mode="widthFix"></image>
              </view>
              <view style="font-size: 24px;margin-top: 19px;" class="fw_500 color_292929">
                {{ state.surnameDetail.ancestors }}
              </view>
              <view style="font-size: 17px;margin-top: 22px;" class="color_4B4B4B fw_500">
                百家姓 第{{ state.surnameDetail.ranking }}名 总人口{{ state.surnameDetail.population }}
              </view>
              <view class="flex align-center justify-around"
                    style="margin-top: 37px;width: 90%;">
                <view class="mrZhongWu_founder_right_operation_list flex flex-column align-center"
                      style="position: relative">
                  <image class="mrZhongWu_founder_right_operation_list_image"
                         style="width: 30px;height: 30px;"
                         :src="state.surnameDetail.is_like == 1 ? `${sq_image_path}/chineseSurname/sq_thumbsUp_select.png`:`${sq_image_path}/chineseSurname/sq_thumbsUp.png`"
                  ></image>
                  <text class="mrZhongWu_founder_right_operation_list_text" style="margin-top: 8rpx;">
                    点赞{{ state.surnameDetail.likes || 0 }}
                  </text>
                  <!--                        <image :src="`${IMG_URL}dianzan_gif.gif`" v-if="showGif" class="gif"></image>-->
                </view>
                <view class="mrZhongWu_founder_right_operation_list flex flex-column align-center">
                  <image class="mrZhongWu_founder_right_operation_list_image"
                         style="width: 30px;height: 30px;"
                         :src="`${sq_image_path}/chineseSurname/sq_comments.png`"></image>
                  <text class="mrZhongWu_founder_right_operation_list_text" style="margin-top: 8rpx;">
                    评论{{ state.surnameDetail.comment || 0 }}
                  </text>
                </view>
              </view>
              <view class="flex align-center justify-center bg_FF4206 fw_500 color_FFFFFF"
                    style="width: 80%;height: 43px;border-radius: 50px;font-size: 20px;margin-top: 47px;margin-bottom: 31px;cursor:pointer;"
              >
                去献花
              </view>
            </view>
          </uni-col>
          <uni-col :span="18" style="height: 100%;"
                   class="flex flex-column align-center justify-center"
          >
            <view class="flex-sub" scroll-y="true"
                  style="width: 100%;border-radius: 22px;border: 1px solid #EDEDED;margin-top: 10rpx;margin-bottom: 10px;overflow-y: scroll;position: relative;background: rgb(251, 243, 225)"
            >
              <view
                style="position: absolute;left: 50%;transform: translateX(-50%);font-size: 23px;width: 90%;white-space: pre-wrap;line-height: 40px">
                <mp-html :content="state.surnameDetail.origin"></mp-html>
                <mp-html :content="state.surnameDetail.transfer"></mp-html>
                <mp-html :content="state.surnameDetail.county"></mp-html>
                <mp-html :content="state.surnameDetail.couplet"></mp-html>
                <mp-html :content="state.surnameDetail.allusion"></mp-html>
                <mp-html :content="state.surnameDetail.family_tradition"></mp-html>
                <mp-html :content="state.surnameDetail.ancestral_hall"></mp-html>
                <mp-html :content="state.surnameDetail.generation"></mp-html>
                <mp-html :content="state.surnameDetail.genealogy"></mp-html>
                <mp-html :content="state.surnameDetail.celebrity"></mp-html>
                <mp-html :content="state.surnameDetail.claninsignia"></mp-html>
              </view>
            </view>
          </uni-col>
        </uni-row>
      </view>
      <!-- 节日详情 -->
      <view class="flex flex-column align-center surnameTree"
            style="height: 100%;position: absolute;background: #FFFFFF;width: 99%;left: 100%;top: 0;border-radius: 8px;overflow: hidden"
            :class="pageConfig.showFestivalDetail ? 'showSurnameTree' : 'hideSurnameTree'"
      >
        <uni-row style="width: 100%;border-bottom: 1px solid #E8E8E8"
                 class="flex flex-column align-center"
        >
          <uni-col :span="24" class="flex align-center" style="margin: 10px;">
            <image :src="`${IMG_URL}/index/pc_back.png`"
                   style="width: 30px;height: 30px;cursor:pointer;margin-left: 15px;"
                   @click.stop="closeFestival"
            ></image>
            <view class="flex align-center" style="margin-left: 10px;">
              <view style="width: 4px;height: 18px;background: #FF440A;border-radius: 7px;"></view>
              <view style="font-size: 28px;color: #363636;font-weight: 500;margin-left: 5px;">
                {{ state.festivals.title }}
              </view>
            </view>
          </uni-col>
        </uni-row>
        <uni-row style="width: 100%;"
                 class="flex-sub flex"
        >
          <uni-col :span="24" style="height: 100%;position: relative">
            <scroll-view v-if="!!state.festivals.content.content"
                         scroll-y="true"
                         style="height: 100%;position: absolute;top: 0;width: 80%;left: 50%;transform: translateX(-50%)"
            >
              <mp-html :content="state.festivals.content.content"
                       style="line-height: 30px;font-size: 20px;font-weight: 500;"></mp-html>
              <view style="height: 50px;"></view>
            </scroll-view>
          </uni-col>
        </uni-row>
      </view>
    </uni-col>
  </uni-row>
</template>

<script setup>
  import { reactive, computed, getCurrentInstance, nextTick } from 'vue';
  import sheep from '@/sheep';
  import { onReady, onLoad, onShow } from '@dcloudio/uni-app';
  import HomePage from '@/pages/pc/components/homePage.vue';
  import UniCol from '@/uni_modules/uni-row/components/uni-col/uni-col.vue';
  import FamilyPage from '@/pages/pc/components/familyPage.vue';
  import GenealogyPage from '@/pages/pc/components/genealogyPage.vue';
  import MpHtml from '@/uni_modules/mp-html/components/mp-html/mp-html.vue';
  import PeoplePage from '@/pages/pc/components/peoplePage.vue';

  const { proxy } = getCurrentInstance();

  const page = reactive({
    headerIcon: 0,
    bottomIcon: 0,
    // 当前页面宽度
    pageWidth: 0,
    // 当前页面高度
    pageHeight: 0,
    // 页面比例
    pageScale: 1,
  });

  const state = reactive({
    controlsList: [
      {
        text: '首页',
        activeIcon: '/assets/tabbar/pc_home_active.png',
        inactiveIcon: '/assets/tabbar/pc_home.png',
      },
      {
        text: '家庭',
        activeIcon: '/assets/tabbar/pc_family_active.png',
        inactiveIcon: '/assets/tabbar/pc_family.png',
      },
      {
        text: '家谱',
        activeIcon: '/assets/tabbar/pc_genealogy_active.png',
        inactiveIcon: '/assets/tabbar/pc_genealogy.png',
      },
      {
        text: '更多',
        activeIcon: '/assets/tabbar/pc_more_active.png',
        inactiveIcon: '/assets/tabbar/pc_more.png',
      },
    ],
    setUp: [{ name: '我的会员' }, { name: '印刷制作' }, { name: '意见反馈' }, { name: '设置' }],
    // 当前选择的选项
    current: 0,
    // 姓氏树详情
    surnameTree: {},
    // 选择的姓氏详情
    surnameDetail: {},
    // 节日节气详情
    festivals: {},
  });

  // 页面配置
  const pageConfig = reactive({
    // 姓氏树
    isSurnameTree: false,
    // 姓氏详情
    isSurnameDetail: false,
    // 节日详情
    showFestivalDetail: false,
  });

  const basic_nc = computed(() => sheep.$store('app').template.basic_nc.tabbar.list);
  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const nc_image = computed(() => sheep.$store('AI').nc_image);
  const userInfo = computed(() => sheep.$store('user').userInfo);
  const sq_image_path = computed(() => sheep.$store('AI').sq_image_path);

  onLoad(async (options) => {
    // if(!!options.index){
    //   state.current = options.index;
    // }else{
    //   state.current = 0;
    // }
    page.pageWidth = sheep.$platform.device.windowWidth;
    page.pageHeight = sheep.$platform.device.windowHeight;
    await getSurnameTree();
  });

  onReady(() => {
    nextTick(() => {
      uni.onWindowResize((res) => {
        page.pageWidth = res.size.windowWidth;
        page.pageHeight = res.size.windowHeight;
      });
      const query = uni.createSelectorQuery().in(proxy);
      query
        .select('#headerIcon')
        .boundingClientRect((res) => {
          page.header_icon = res.height;
          console.log(page.header_icon);
        })
        .exec();
      query
        .select('#bottomIcon')
        .boundingClientRect((res) => {
          page.bottomIcon = res.height;
        })
        .exec();
    });
  });

  onShow(async () => {
    await sheep.$store('family').getList();
  });

  function toggle(index) {
    if(state.controlsList[index].text == '更多'){
      uni.showToast({
        title: '功能开发中',
        icon: 'none',
        duration: 2000
      })
      return
    }
    state.current = index;
    // sheep.$router.go('/pages/pc/index',{index})
  }

  // 获取姓氏树详情
  async function getSurnameTree() {
    const { data } = await sheep.$api.surname.getSurnameDetail({ id: 108 });
    state.surnameTree = data;
  }

  // 姓氏树查看详情
  async function viewDetails() {
    pageConfig.isSurnameTree = true;
  }

  // 关闭姓氏树详情
  function closeSurnameTree() {
    pageConfig.isSurnameTree = false;
  }

  // 查看姓氏详情
  function surnameDetails(e) {
    // 当前始祖详情
    state.surnameDetail = e;
    pageConfig.isSurnameDetail = true;
  }

  async function selectFestivals(e) {
    const { data } = await sheep.$api.surname.getSurnameDetail({ id: e.id });
    console.log(data);
    state.festivals = data;
    pageConfig.showFestivalDetail = true;
  }

  function closeFestival() {
    pageConfig.showFestivalDetail = false;
    state.festivals = {};
  }

  function closeSurnameDetail() {
    pageConfig.isSurnameDetail = false;
  }

  // 跳转个人中心
  function goPath() {
    state.current = 8;
  }

  // 功能页面
  function functionPage(index) {
    switch (index) {
      case 0:
        sheep.$router.go('/pages/vip/liberal');
        break;
      case 2:
        sheep.$router.go('/pages/public/feedback');
        break;
      case 3:
        state.current = 8;
        break;
    }
  }
</script>

<style scoped lang="scss">
  .showSurnameTree {
    animation: surnameTree .2s linear;
    animation-fill-mode: forwards; //  动画停留在最后一刻，也就是隐藏
  }

  .hideSurnameTree {
    animation: hideSurnameTree .2s linear;
    animation-fill-mode: forwards;
  }

  @keyframes surnameTree {
    0% {
      left: 100%;
    }
    100% {
      left: 0;
    }
  }

  @keyframes hideSurnameTree {
    0% {
      left: 0;
    }
    100% {
      left: 100%;
    }
  }
</style>
